<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // $("#div1,#div2,#div3").fadeIn(5000)//同时淡入
                //依次淡入
                $("#div1").fadeIn()
                $("#div2").fadeIn("slow")
                $("#div3").fadeIn(3000)
            })
        })
    </script>
</head>
<body>
<p>演示jQuery淡入方法</p>
<!--<button>点击这里使三个矩形淡入I</button>-->
下面的display选择none表示初始不展示div模块
<div id="div1" style="background-color: red; width: 50px; height: 50px;display: none"></div>
<div id="div2" style="background-color: yellow; width: 50px; height: 50px;display: none"></div>
<div id="div3" style="background-color: green; width: 50px; height: 50px;display: none"></div>
</body>
</html>